<%--
  Created by IntelliJ IDEA.
  User: gongb
  Date: 2022/3/2
  Time: 14:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/mytaglibs.jsp"%>
<html>
<head>
    <title>新用户注册</title>
    <style>
        *{
            /*border:1px solid black;*/
        }
        .reg{

            display: flex;
            flex-direction: column ;
        }
        .xin{
            color:#c53cff;
        }
    </style>
</head>
<body>
<div class="reg">
    <div>
        <label for="email">注册邮箱：</label>
        <input type="text" name="email" onblur="checkEmail(this)"><span class="xin">*</span>
        <span id="emailCheck"></span>
    </div>
   <div>
        <label for="username">用户名：</label>
        <input type="text" name="username"/><span class="xin">*</span>
   </div>
    <div>
        <label for="password">密码：</label>
        <input type="text" name="password"/><span class="xin">*</span>
    </div>
</div>

<script src="${ctx}/test/jquery.min.js"></script>
<script>
    $(document).ready(function(){
       alert('reday')
    });
</script>
<script>
    function checkEmail(obj){
        //1.得到email
        let email = obj.value;
        console.log(email)
        //除空情况， ""  null   undefined
        debugger //js代码断点
        if(email){
            $.post("${ctx}/AjaxServlet",
                {
                    email:email
                },
                function(data,status){
                    var myObj =  JSON.parse(data);
                    //如何从json字符串中获得msg的值？TODO
                    let msg = myObj.msg;
                    console.log(msg)
                    //获得msg信息，判断是否可用
                    if(msg=='success'){
                        //emailCheck加入//<span style="color:green">该邮箱可用!</span>
                        document.getElementById("emailCheck").innerHTML = '<span style="color:green">该邮箱可用!</span>';
                    }else if(msg=='fail'){
                        //emailCheck加入//<span style="color:red">该邮箱已注册!</span>
                        document.getElementById("emailCheck").innerHTML = '<span style="color:red">该邮箱已注册!</span>';
                    }else{
                        //emailCheck加入//空
                        document.getElementById("emailCheck").innerHTML = '';
                    }
                }
            );
            //2.ajax发送email给服务器,判断格式的合法性
            <%--var xhttp = new XMLHttpRequest();--%>
            <%--//如果成功会回调该函数（定义当 readyState 属性发生变化时被调用的函数）--%>
            <%--xhttp.onreadystatechange = function() {--%>
            <%--    //4-请求已完成且响应已就绪  200: "OK"--%>
            <%--    if (this.readyState == 4 && this.status == 200) {--%>
            <%--        //以字符串返回响应数据--%>
            <%--        //{ 'status':200, 'msg':'success' }--%>
            <%--        console.log(this.responseText);--%>
            <%--        debugger--%>
            <%--        var myObj =  JSON.parse(this.responseText);--%>

            <%--        //如何从json字符串中获得msg的值？TODO--%>
            <%--        let msg = myObj.msg;--%>
            <%--        console.log(msg)--%>
            <%--        //获得msg信息，判断是否可用--%>
            <%--        if(msg=='success'){--%>
            <%--            //emailCheck加入//<span style="color:green">该邮箱可用!</span>--%>
            <%--            document.getElementById("emailCheck").innerHTML = '<span style="color:green">该邮箱可用!</span>';--%>
            <%--        }else if(msg=='fail'){--%>
            <%--            //emailCheck加入//<span style="color:red">该邮箱已注册!</span>--%>
            <%--            document.getElementById("emailCheck").innerHTML = '<span style="color:red">该邮箱已注册!</span>';--%>
            <%--        }else{--%>
            <%--            //emailCheck加入//空--%>
            <%--            document.getElementById("emailCheck").innerHTML = '';--%>
            <%--        }--%>
            <%--    }--%>
            <%--};--%>
            <%--xhttp.open("POST", "${ctx}/AjaxServlet", true);--%>
            <%--xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");--%>
            <%--xhttp.send("email="+email);--%>
        }


    }
</script>
</body>
</html>
